/**
 * 
 */
$(function() {
    var MVC = MVC || {};
    MVC.model = function() {
        var M = {};
        M.data = {
            slideBar: [
                {
                    text: '萌妹子',
                    icon: 'left_meng.png',
                    title: '喵耳萝莉千本樱',
                    content: '自古幼女有三好~',
                    img: 'left_meng_img.png',
                    href: 'http://moe.hao123.com'
                },
                {
                    text: '动漫',
                    icon: 'left_meng.png',
                    title: '喵耳萝莉千本樱',
                    content: '自古幼女有三好~',
                    img: 'left_meng_img.png',
                    href: 'http://moe.hao123.com/dongman/'
                },
                {
                    text: 'lol直播',
                    icon: 'left_meng.png',
                    title: '喵耳萝莉千本樱',
                    content: '自古幼女有三好~',
                    img: 'left_meng_img.png',
                    href: 'http://moe.hao123.com/zhibo/'
                },
                {
                    text: '网络剧',
                    icon: 'left_meng.png',
                    title: '喵耳萝莉千本樱',
                    content: '自古幼女有三好~',
                    img: 'left_meng_img.png',
                    href: 'http://moe.hao123.com/wangju/'
                },
                {
                    text: '热帖',
                    icon: 'left_meng.png',
                    title: '喵耳萝莉千本樱',
                    content: '自古幼女有三好~',
                    img: 'left_meng_img.png',
                    href: 'http://moe.hao123.com/retie/'
                }
            ]
        };
        M.conf = {
            slideBarAnimate: false
        };
        return{
            // 接口方法
            getData: function(m) {
                return M.data[m];
            },
            getConf: function(c) {
                return M.conf[c];
            },
            setData: function(m, v) {
                M.data[m] = v;
                return this;
            },
            setConf: function(c, v) {
                M.conf[c] = v;
                return this;
            }
        }
    }();
    MVC.view = function() {
        var M = MVC.model;
        var V = {
            createSliderBar: function() {
                var html = '',
                    data = M.getData('slideBar');
                if (!data || !data.length) return;
                var dom = $.create('div', {
                    'class': 'slideBar',
                    'id': 'slideBar'
                });
                var tpl = {
                    container: [
                        '<div class="slideBar-inner"><ul>{#content#}</ul></div>',
                        '<a hidefocus href="#" class="slideBar-close" title="收起" />'
                    ].join(''),
                    item: [
                        '<li>',
                            '<a class="icon" href="{#href#}">',
                                '<img src="common/img/{#icon#}">',
                                '<span>{#text#}</span>',
                            '</a>',
                            '<div class="box">',
                                '<div>',
                                    '<a class="title" href="{#href#}">{#title#}</a>',
                                    '<a href="{#href#}">{#content#}</a>',
                                '</div>',
                                '<a class="image" href={#href#}><img src="common/img/{#img#}"/></a>',
                            '</div>',
                        '</li>'
                    ].join('')
                };
                for(var i = 0, len = data.length; i < len; i++) {
                    html += $.formateString(tpl.item, data[i]);
                }
                dom
                    .html(
                        $.formateString(tpl.container, {content: html})
                    )
                    .appendTo('body');
            }
        };
        return function(v) {
            V[v]();
        }
    }();
    MVC.ctrl = function() {
        var V = MVC.view;
        var M = MVC.model;
        var C = {
            initSliderBar: function() {
                V('createSliderBar');
                $('li', 'slidebar')
                    .on('mouseover', function(e) {
                        $(this).addClass('show');
                    })
                    .on('mouseout', function(e) {
                        $(this).removeClass('show');
                    });
                $('.slidebar-close', 'slidebar')
                    .on('click', function(e) {
                        if (M.getConf('slideBarAnimate')) return false;
                        M.setConf('slideBarAnimate', true);
                        var $this = $(this);
                        if ($this.hasClass('is-close')) {
                            $('.slidebar-inner', 'slidebar')
                                .animate({
                                    duration: 800,
                                    type: 'easeOutQuart',
                                    main: function(dom) {
                                        dom.css('left', -50 + this.tween * 50 + 'px');
                                    },
                                    end: function() {
                                        $this.removeClass('is-close');
                                        M.setConf('slideBarCloseAnimate', false);
                                    }
                                })
                        } else {
                            $('.slidebar-inner', 'slidebar')
                                .animate({
                                    duration: 800,
                                    type: 'easeOutQuart',
                                    main: function(dom) {
                                        dom.css('left', this.tween * -50 + 'px');
                                    },
                                    end: function() {
                                        $this.addClass('is-close');
                                        M.setConf('slideBarCloseAnimate', false);
                                    }
                                });
                        }
                    })
            }
        }
        C.initSliderBar();

        /*for (var i in C) {
            C[i] && C[i]();
        }*/
    }();
})
